<template>
	<view>
		<u-navbar :is-back="false" title="选择商品"
		  title-size="30"
		  :background="{background:'#2B88FE' }"
		  title-color="#fff">
		  <div class="head_icon">
		    <u-icon @click="$api.handleBackTo"
		      name="arrow-left" color="#fff"
		      size="36">
		    </u-icon>
		    <u-icon @click="$api.handleHomeTo"
		      name="home" color="#fff" size="36">
		    </u-icon>
		  </div>
		</u-navbar>
  <div class="app-drawSelect">
    <view class="app-head">
      <u-dropdown
        ref="uDropdown">
        <u-dropdown-item
          :title="className"
          :options="types"
          @change="classChange">
        </u-dropdown-item>
      </u-dropdown>
      <u-search
        v-model="form.Key"
        @change="changeSearch">
      </u-search>
    </view>
    <div
      v-for="(item,index) in clist"
      :key="index">
      <appProduct :li="item">
        <u-checkbox
          style="margin-right:-20rpx"
          :name="index"
          v-model="item.checked"
          shape="circle">
        </u-checkbox>
      </appProduct>
    </div>
    <div class="footer">
      <u-button type="primary"
        @click="addSave">确认添加
      </u-button>
    </div>
  </div>
  </view>
</template>

<script>
import appProduct from '@/components/app-product'
export default {
  components: {
    appProduct
  },
  data() {
    return {
      types: [],
      className: '筛选',
      isAllList: true,
      clist: [],
      status: 'loading',
      loading: true,
      form: {
        ClassId: 0,
		 MrkId: 0,
        Status: 0,
        Key: ''
      },
      page: 1,
      pSize: 10
    }
  },
  onReachBottom() {
    if (!this.isAllList) return
    this.page += 1
    this.getList()
  },
  onLoad(e) {
    if (e.fId) {
      this.form.MrkId = Number(e.fId)
    }
 
  },
  methods: {
    addSave() {
      let list = this.clist.filter(x => x.checked)
      getApp().globalData.addCusGoodLi = list
      uni.navigateBack({
        delta: 1
      })
    },
    handleSelect(item, index) {
      item.checked = !item.checked
      console.log(item)
      this.$set(this.clist, index, item)
    },

    classChange(e) {
      this.className = this.types.find(x => x.value === e).label
      this.form.ClassId = e
	 this.defaultData()
      this.getList()
    },
    changeSearch() {
      this.defaultData()
      this.getList()
      // this.defaultData(() => {
      //   this.getList()
      // })
    },
    defaultData() {
      this.isAllList = true
      this.page = 1
      this.clist = []
      this.status = 'loading'
      this.loading = true
    },
    getList() {
      let list = getApp().globalData.addCusGoodLi ? getApp().globalData.addCusGoodLi.map(x => x.fId) : []
      this.$axios('api/ProBasic/ListPaged', 'post', { value: this.form, PageIndex: this.page, PageSize: this.pSize }).then(res => {
        if (!res.Value.List.length) {
          this.isAllList = false
          return
        }
        const clist = res.Value.List.map(x => ({
          ...x,
          avatar: this.$api.getImg(x.fPic),
          gname: x.fTitle,
          id: x.fId,
          checked: list.includes(x.fId) ? true : false,
          details: [
            {
              label: '条码',
              value: x.fCode
            },
            {
              label: '库存（'+ x.fPackUnit+'）',
              value: x.fPackCount
            },
            {
                label: '库存（'+ x.fUnit+'）',
              value: x.fCount
            },
            {
              label: '价格（'+x.fPackUnit+'）',
              value: x.fPackPrice +' 元'
            },
            {
                label: '价格（'+x.fUnit+ '）',
              value: x.fPrice +' 元'
            }
          ]
        }))
        this.clist.push(...clist)
      })
    }
  },
  onShow() {
    this.$axios('api/ProClassBasic/GetList', 'post', { value: 0 }).then(res => {
      let list = res.Value.map(x => ({
        label: x.fClassName,
        value: x.fClassId
      }))
      this.types = list
    })
    this.defaultData()
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.app-drawSelect {
  .footer {
    padding-bottom: 100rpx;
    .u-btn,
    u-button {
      bottom: 2%;
      left: 2%;
      position: fixed;
      width: 96%;
    }
  }
}
</style>